import { ExclamationCircleFilled, FullscreenOutlined } from '@ant-design/icons'
import { Card, Col, Modal, Row, Space, message } from 'antd'
import React, { memo, useEffect, useMemo } from 'react'
import VChart from '../VChart'
import VTable from '../VTable'
import './index.css'
import { Columns} from './constant'
import { deleteVehicle } from '../../page/VehicleAnalysis/services'

interface CardPropsType {
  width?: number
  columns?:any
  title: string
  type: string
  dataSource: any
}
const HomeCard: React.FC<CardPropsType> = ({ title, type, columns,dataSource}) => {
  console.log({ title, type, columns,dataSource})
  
  const [isHovered, setIsHovered] = React.useState(false) // 是否hover
  const [isFullScreen, setIsFullScreen] = React.useState(false) // 是否全屏
  // const [isChange, setIsChange] = React.useState(false) // 是否改变
 
  

  // 卡片分为text,pie,line...(small,large)
  const size = type === 'icon' || type === 'text' ? 's' : type === 'line' || type === 'bar' || type === 'cards' || type === 'pie' || type === 'table' ? 'l' : 's'
  // 保存Content返回值,isFullScreen改变时返回
  const Content = useMemo(() => {
    if (type === 'icon') {
      return <>{dataSource}</>
    } else if (type === 'text') {
      return <p>text</p>
    } else if (type === 'pie') {
      return <VChart option={dataSource} isFullScreen={isFullScreen} />
    } else if (type === 'line') {
      const LineOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: dataSource.map((item: any) => item.vehicle_id),
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataSource.map((item: any) => item.count),
            type: 'line'
          }
        ]
      }
      // 发送请求获取数据
      return <VChart option={LineOption} isFullScreen={isFullScreen} />
    } else if (type === 'bar') {
      // 发送请求获取数据
      const BarOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'category',
          data: dataSource.map((item: any) => item.vehicle_id)
        },
        xAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataSource.map((item: any) => item.mileage),
            type: 'bar'
          }
        ]
      }
      return <VChart option={BarOption} isFullScreen={isFullScreen} />
    } else if (type === 'cards') {
      let halfLength = Math.ceil(dataSource.length / 2) // 计算中间位置索引
      let firstHalf = dataSource.slice(0, halfLength) // 获取前半部分数组
      let secondHalf = dataSource.slice(halfLength)
      return (
        <div style={{
          
        }} >
          <Row gutter={[16, 24]} style={{marginBottom:20}}>
            {firstHalf.map((item: any, index: number) => {
              return (
                <Col flex={"1 1 auto"} key={`车辆状态${index}`}>
                  <Card title={"车辆"+item.status} bordered={false}>
                    <div className="cardContent">{item.count}</div>
                  </Card>
                </Col>
              )
            })}
      
          </Row>
          <Row gutter={6} >
            {secondHalf.map((item: any, index: number) => {
              return (
                <Col flex={"1 1 auto"} key={`驾驶员状态${index}`}>
                  <Card title={"驾驶员"+item.status} bordered={false}>
                    <div className="cardContent">{item.count}</div>
                  </Card>
                </Col>
              )
            })}
          </Row>
        </div>
      )
    } else if (type === 'table') {
      return <VTable bordered={false} columns={columns} data={dataSource}/>
    }
  }, [isFullScreen,dataSource])


  return (
    <div className={`v${size}-card-container ${isFullScreen ? 'fullscreen' : ''}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <div className="card-title">{title}</div>
      {isHovered && size === 'l' && (
        <div className="card-actions">
          <FullscreenOutlined
            onClick={() => {
              setIsFullScreen(!isFullScreen)
            }}
          />
        </div>
      )}
      <div className="card-content" >
      {Content}
      </div>
    </div>
  )
}

export default memo(HomeCard);
